<template>
  <div class="car">
    <carTop
      :total="receptData.count"
      :isManage="isManage"
      @status="isManage = !isManage"
    ></carTop>
    <div class="defaultCar lcenter" v-if="!receptData?.list?.length">
      <nut-image :src="getAssetsFile('car/carDefault.png')" />
      <p>购物车空空如也</p>
    </div>

    <div class="carBody">
      <template v-for="father in receptData.list" :key="father.id">
        <div class="carItem" v-if="father.cart_items.length > 0">
          <div class="userInfo jscenter">
            <div v-if="father.isChose" v-cloak>
              <nut-image
                class="choseItem"
                :src="getAssetsFile('home/payOrder/chosePay.png')"
                @click="choseFatherAll(father)"
              />
            </div>
            <div v-else v-cloak>
              <nut-image
                class="choseItem"
                :src="getAssetsFile('car/noChose.png')"
                @click="cancelFatherAll(father)"
              />
            </div>

            <!-- <nut-image
              class="choseItem"
              :src="getAssetsFile('car/disBtn.png')"
              v-show="father.isDisable"
            /> -->
            <nut-image
              round
              :src="
                father.avatar
                  ? father.avatar
                  : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png'
              "
              showError
              class="userImg"
            >
              <template #error>
                <nut-image
                  src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                  fit="contain"
                />
              </template>
            </nut-image>
            <p class="userName">{{ father.nickname }}</p>
            <p class="info texthiden">{{ father.title }}</p>
            <nut-image
              class="rightArrow"
              :src="getAssetsFile('car/carRight.png')"
            />
          </div>
          <template v-for="child in father.cart_items" :key="child.id">
            <ProductCard
              :titleWidth="true"
              :options="child"
              @plus="plusCount(child)"
              @reduce="reduceCount(child, father)"
              @show="showFn"
            >
              <slot>
                <div v-if="child.isChose" v-cloak>
                  <nut-image
                    class="choseItem"
                    :src="getAssetsFile('home/payOrder/chosePay.png')"
                    @click="chosechild(father, child)"
                  />
                </div>
                <template v-else v-cloak>
                  <nut-image
                    class="choseItem"
                    :src="getAssetsFile('car/noChose.png')"
                    @click="cancelChild(father, child)"
                  />
                </template>
              </slot>
            </ProductCard>
          </template></div
      ></template>
    </div>

    <div class="carBottom">
      <div class="bottomTip jscenter" v-show="showTip">
        <p>不支持多个团购合并支付</p>
      </div>
      <div class="bottomContent jscenter">
        <div class="contentLeft">
          <div v-if="receptData.isChose" v-cloak>
            <nut-image
              class="chose"
              :src="getAssetsFile('home/payOrder/chosePay.png')"
              @click="choseAll"
            />
          </div>
          <div v-else v-cloak>
            <nut-image
              class="chose"
              :src="getAssetsFile('home/payOrder/noChose.png')"
              @click="choseNo"
            />
          </div>

          <p>全选</p>
        </div>
        <div class="contentCenter" v-if="isManage">
          <div class="total">
            合计:
            <p><span>￥</span>{{ totalPrice }}</p>
          </div>
          <p class="count">已选{{ totalCount }}件</p>
        </div>
        <div class="contentRight ccenter" @click="gotoOrder" v-if="isManage">
          <nut-image class="buyBtn" :src="getAssetsFile('car/canBuyBtn.png')" />
          <p>跟团购买</p>
        </div>
        <div class="deleteBtn ccenter" v-if="!isManage" @click="deleteGroup">
          删除
        </div>
      </div>
    </div>

    <my-image-preview ref="myImagePreviewRef"></my-image-preview>
  </div>
</template>

<script lang="ts" setup name="car">
import { getAssetsFile, isRes } from "@/utils/pub-use";
import carTop from "./components/carTop.vue";
import ProductCard from "@/components/productCard/ProductCard.vue";
import { ref, onMounted } from "vue";
import { getListApi, updateCarApi, deleteCarApi } from "@/api/car/index";
import { useRouter } from "vue-router";
import useCommonStore from "@/store/common";
import myImagePreview from "@/components/imagePreview/index.vue";

const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();

const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};

const commonStore = useCommonStore();
//---------------------------------------上拉加载更多下拉刷新---------------------------------------
let isManage = ref<boolean>(true);
let getListParam = {
  page: 1,
  pagesize: 9999,
};

let receptData: any = ref({});
const getList = async () => {
  let res = await getListApi(getListParam);
  if (isRes(res)) {
    receptData.value = res.result;
    receptData.value.isChose = false;
    receptData.value.list.map((item: any, index: number) => {
      item.isChose = false;
      item.cart_items.map((element: any, location: number) => {
        element.isChose = false;
      });
    });

    getTotalPrice();
    getTotalCount();
    if (!receptData.value.list.length) {
      isManage.value = true;
    }
  }
};
onMounted(() => {
  getList();
});

//父类全选
const choseFatherAll = (father: any) => {
  father.isChose = false;
  receptData.value.isChose = false;
  father.cart_items.map((item: any, index: number) => {
    item.isChose = false;
  });
  getTotalCount();
  getTotalPrice();
};

//取消父类全选
const cancelFatherAll = (father: any) => {
  father.isChose = true;
  father.cart_items.map((item: any, index: number) => {
    item.isChose = true;
  });
  let allChose = receptData.value.list.every((element: any) => {
    if (element.isChose) {
      return true;
    } else {
      return false;
    }
  });
  if (allChose) {
    receptData.value.isChose = true;
  }
  getTotalCount();
  getTotalPrice();
};

//子类选择
const chosechild = (father: any, child: any) => {
  receptData.value.isChose = false;
  father.isChose = false;
  child.isChose = false;
  getTotalCount();
  getTotalPrice();
};
//取消子类选择
const cancelChild = (father: any, child: any) => {
  child.isChose = true;
  let tempFather = father.cart_items.every((item: any) => {
    if (item.isChose) {
      return true;
    } else {
      return false;
    }
  });
  if (tempFather) {
    father.isChose = true;
  }

  let allChose = receptData.value.list.every((element: any) => {
    if (element.isChose) {
      return true;
    } else {
      return false;
    }
  });
  if (allChose) {
    receptData.value.isChose = true;
  }
  getTotalCount();
  getTotalPrice();
};

//全选
const choseAll = () => {
  receptData.value.isChose = false;
  receptData.value.list.map((item: any, index: number) => {
    item.isChose = false;
    item.cart_items.map((element: any, location: number) => {
      element.isChose = false;
    });
  });
  getTotalCount();
  getTotalPrice();
};

//取消全选
const choseNo = () => {
  receptData.value.isChose = true;
  if (receptData?.value.list.length) {
    receptData.value.list.map((item: any, index: number) => {
      item.isChose = true;
      item.cart_items.map((element: any, location: number) => {
        element.isChose = true;
      });
    });
  }

  getTotalCount();
  getTotalPrice();
};

//---------------------------------------计算数量和价格---------------------------------------

//添加数量
const plusCount = async (item: any) => {
  let param = {
    item_id: item.id,
    quantity: 1,
  };
  let res = await updateCarApi(param);
  if (isRes(res)) {
    item.quantity++;
    getTotalPrice();
  }
};
//减少数量
const reduceCount = async (item: any, father: any) => {
  let param = {
    item_id: item.id,
    quantity: -1,
  };
  let res = await updateCarApi(param);
  if (isRes(res)) {
    item.quantity--;
    if (item.quantity == 0) {
      father.cart_items.map((cData: any, index: number) => {
        if (cData.id == item.id) {
          father.cart_items.splice(index, 1);
        }
      });
    }
    getTotalPrice();
  }
};

//计算值
let totalPrice = ref<number>(0);
let totalCount = ref<number>(0);
const getTotalCount = () => {
  totalCount.value = 0;
  receptData.value.list.map((item: any) => {
    item.cart_items.map((element: any) => {
      if (element.isChose) {
        totalCount.value++;
      }
    });
  });
};
const getTotalPrice = () => {
  totalPrice.value = 0;
  receptData.value.list.map((item: any) => {
    item.cart_items.map((element: any) => {
      if (element.isChose) {
        totalPrice.value =
          (element.format_price * 100 * element.quantity +
            totalPrice.value * 100) /
          100;
      }
    });
  });
};
//---------------------------------------加入购物车方法---------------------------------------
const router = useRouter();
let showTip = ref<boolean>(false);
let groupbuy_id = "";
let logistics_type = "";
const gotoOrder = () => {
  let allChose: any = [];
  let tempRe = receptData.value.list.every((item: any) => {
    if (item.isChose) {
      return true;
    } else {
      return false;
    }
  });
  if (receptData.value.list.length == 1) {
    tempRe = false;
  }
  if (tempRe) {
    showTip.value = true;
  } else {
    showTip.value = false;
    receptData.value.list.map((item: any) => {
      item.cart_items.map((element: any) => {
        if (element.isChose) {
          groupbuy_id = element.groupbuy_id;
          logistics_type = item.logistics_type;
          allChose.push(element.id);
        }
      });
    });
    if (allChose.length) {
      localStorage.setItem("car_ids", JSON.stringify(allChose));

      router.push({
        path: "/home/payOrder",
        query: {
          groupbuy_id: groupbuy_id,
          logistics_type: logistics_type,
        },
      });
    }
  }
};

const deleteGroup = async () => {
  let allChose: any = [];
  receptData.value.list.map((item: any) => {
    item.cart_items.map((element: any) => {
      if (element.isChose) {
        allChose.push(element.id);
      }
    });
  });
  if (allChose.length > 0) {
    let res = await deleteCarApi({ ids: allChose });
    if (isRes(res)) {
      getList();
    }
  }
};
</script>
<style scoped lang="scss">
.car {
  height: 100%;
  [v-cloak] {
    display: none !important;
  }
  .defaultCar {
    height: calc(100% - 92px);
    .nut-image {
      width: 300px;
      height: 226px;
    }
    p {
      font-size: 28px;
      color: #999999;
      margin-top: 31px;
    }
  }

  .carBody {
    padding: 0 20px;
    margin-top: 20px;
    padding-bottom: 280px;
    .userInfo {
      .choseItem {
        width: 36px;
        height: 36px;
      }
      .userImg {
        width: 50px;
        height: 50px;
        margin-left: 5px;
      }
      .userName {
        color: #000000;
        font-size: 28px;
        word-break: keep-all;
        margin-left: 10px;
        margin-right: auto;
      }
      .info {
        width: 224px;
        color: #000000;
        font-size: 28px;
        text-align: right;
      }
      .rightArrow {
        width: 26px;
        height: 26px;
      }
    }
    .carItem {
      background: #ffffff;
      border-radius: 20px;
      padding: 30px 15px;
      margin-bottom: 20px;
      .choseItem {
        width: 36px;
        height: 36px;
        margin-right: 15px;
      }
    }
  }
  .carBottom {
    width: 100%;
    position: fixed;
    background: #ffffff;
    bottom: 110px;
    height: 138px;
    .bottomTip {
      width: 100%;
      position: absolute;
      top: -80px;
      height: 80px;
      background: #fff9e0;
      padding-left: 30px;
      P {
        color: #f55726;
        font-size: 26px;
      }
    }
    .bottomContent {
      padding: 25px 20px 25px 40px;
      .contentLeft {
        display: flex;
        .chose {
          width: 36px;
          height: 36px;
        }
        p {
          margin-left: 15px;
          font-size: 28px;
          color: #000000;
        }
      }
      .contentCenter {
        margin-left: 188px;
        .total {
          display: flex;
          font-size: 28px;
          color: #000000;
          p {
            font-weight: 500;
            color: #f55726;
            font-size: 28px;
            span {
              font-size: 23px;
            }
          }
        }
        .count {
          margin-bottom: 3px;
          text-align: right;
          color: #999999;
          font-size: 24px;
        }
      }
      .contentRight {
        position: relative;
        .buyBtn {
          width: 200px;
          height: 80px;
        }
        p {
          font-weight: 500;
          color: #ffffff;
          font-size: 30px;
          position: absolute;
        }
      }
      .deleteBtn {
        width: 146px;
        height: 58px;
        border-radius: 29px;
        border: 1px solid #999999;
        font-size: 26px;
      }
    }
  }
}
</style>
